<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<title></title>
		<script src="js/jquery-2.1.4.min.js"></script>
		<script src="js/common.js"></script>
		<script src="js/mui.min.js"></script>
    	<link href="css/mui.min.css" rel="stylesheet"/>
    	<link href="css/style.css" rel="stylesheet"/>
	</head>
	<body>
		<div class="container">
			<header class="mui-bar mui-bar-nav layout-bg">
			    <a class="mui-pull-left" id="my_order">
			    	<span class="mission-icon"></span>
			    	<span class="mui-badge mui-badge-success mission-num">12</span>
			    </a>
			    <h1 class="mui-title">任务大厅</h1>
			    
			    <a class="mui-pull-right" id="my_message">
			    	<span class="mis-message"></span>
			    </a>
			</header>
		
			<div class="mission-list-box layout-gap">
				<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
		  			<div class="mui-scroll">
					    <!--数据列表-->
					    <ul class="mui-table-view mui-table-view-chevron">
						    <li class="mission-item">
								<div class="mui-flex mission-title">
									<div class="cell fixed">
										<img src="images/default-avatar.png" class="is-avatar" />
									</div>
									<div class="cell">
										<div class="mission-content a-line">
											用户<span class="mis-name">刘伟</span>需要<span class="mis-apellation">搬家</span>服务
										</div>
									</div>
									<div class="cell fixed">
										<span class="green-icon fl"></span>
										<span class="green-text fl">新任务</span>
									</div>
								</div>
								
								<div class="mission-details">
									<div class="details-list">
										<div class="details-list-left fl">搬运时间：</div>
										<div class="details-list-right">2017-09-21 18:45</div>
									</div>
									<div class="details-list">
										<div class="details-list-left fl">出发地：</div>
										<div class="details-list-right">庐阳区临泉路387号102</div>
									</div>
									<div class="details-list">
										<div class="details-list-left fl">目的地：</div>
										<div class="details-list-right">市府广场</div>
									</div>
								</div>
								
								<a class="details-list mui-text-right bor-b-ed">
									<div class="details-list-left view-mission">查看任务</div>
									<span class="mui-icon mui-icon-arrowright" style="color: #777;"></span>
								</a>
							</li>
							
							<li class="mission-item">
								<div class="mui-flex mission-title">
									<div class="cell fixed">
										<img src="images/default-avatar.png" class="is-avatar" />
									</div>
									<div class="cell">
										<div class="mission-content a-line">
											用户<span class="mis-name">王胖子</span>购买了商品
										</div>
									</div>
									<div class="cell fixed">
										<span class="mission-time">1小时前</span>
									</div>
								</div>
								
								<div class="mission-details">
									<div class="details-list">
										<div class="details-list-left fl">配送商品：</div>
										<div class="details-list-right">可口可乐</div>
									</div>
									<div class="details-list">
										<div class="details-list-left fl">配送地址：</div>
										<div class="details-list-right">庐阳区临泉路387号102</div>
									</div>
									<div class="details-list">
										<div class="details-list-left fl">商品价格：</div>
										<div class="details-list-right">￥3.00</div>
									</div>
								</div>
								
								<a class="details-list mui-text-right bor-b-ed">
									<div class="details-list-left view-mission">查看订单</div>
									<span class="mui-icon mui-icon-arrowright" style="color: #777;"></span>
								</a>
							</li>
							
							<li class="mission-item">
								<div class="mui-flex mission-title">
									<div class="cell fixed">
										<img src="images/default-avatar.png" class="is-avatar" />
									</div>
									<div class="cell">
										<div class="mission-content a-line">
											用户<span class="mis-name">王胖子</span>购买了商品
										</div>
									</div>
									<div class="cell fixed">
										<span class="mission-time">1小时前</span>
									</div>
								</div>
								
								<div class="mission-details">
									<div class="details-list">
										<div class="details-list-left fl">配送商品：</div>
										<div class="details-list-right">可口可乐</div>
									</div>
									<div class="details-list">
										<div class="details-list-left fl">配送地址：</div>
										<div class="details-list-right">庐阳区临泉路387号102</div>
									</div>
									<div class="details-list">
										<div class="details-list-left fl">商品价格：</div>
										<div class="details-list-right">￥3.00</div>
									</div>
								</div>
								
								<a class="details-list mui-text-right bor-b-ed">
									<div class="details-list-left view-mission">查看订单</div>
									<span class="mui-icon mui-icon-arrowright" style="color: #777;"></span>
								</a>
							</li>
							
							<li class="mission-item">
								<div class="mui-flex mission-title">
									<div class="cell fixed">
										<img src="images/default-avatar.png" class="is-avatar" />
									</div>
									<div class="cell">
										<div class="mission-content a-line">
											用户<span class="mis-name">王胖子</span>购买了商品
										</div>
									</div>
									<div class="cell fixed">
										<span class="mission-time">1小时前</span>
									</div>
								</div>
								
								<div class="mission-details">
									<div class="details-list">
										<div class="details-list-left fl">配送商品：</div>
										<div class="details-list-right">可口可乐</div>
									</div>
									<div class="details-list">
										<div class="details-list-left fl">配送地址：</div>
										<div class="details-list-right">庐阳区临泉路387号102</div>
									</div>
									<div class="details-list">
										<div class="details-list-left fl">商品价格：</div>
										<div class="details-list-right">￥3.00</div>
									</div>
								</div>
								
								<a class="details-list mui-text-right bor-b-ed">
									<div class="details-list-left view-mission">查看订单</div>
									<span class="mui-icon mui-icon-arrowright" style="color: #777;"></span>
								</a>
							</li>
							
							<li class="mission-item">
								<div class="mui-flex mission-title">
									<div class="cell fixed">
										<img src="images/default-avatar.png" class="is-avatar" />
									</div>
									<div class="cell">
										<div class="mission-content a-line">
											用户<span class="mis-name">王胖子</span>购买了商品
										</div>
									</div>
									<div class="cell fixed">
										<span class="mission-time">1小时前</span>
									</div>
								</div>
								
								<div class="mission-details">
									<div class="details-list">
										<div class="details-list-left fl">配送商品：</div>
										<div class="details-list-right">可口可乐</div>
									</div>
									<div class="details-list">
										<div class="details-list-left fl">配送地址：</div>
										<div class="details-list-right">庐阳区临泉路387号102</div>
									</div>
									<div class="details-list">
										<div class="details-list-left fl">商品价格：</div>
										<div class="details-list-right">￥3.00</div>
									</div>
								</div>
								
								<a class="details-list mui-text-right bor-b-ed">
									<div class="details-list-left view-mission">查看订单</div>
									<span class="mui-icon mui-icon-arrowright" style="color: #777;"></span>
								</a>
							</li>
							
							<li class="mission-item">
								<div class="mui-flex mission-title">
									<div class="cell fixed">
										<img src="images/default-avatar.png" class="is-avatar" />
									</div>
									<div class="cell">
										<div class="mission-content a-line">
											用户<span class="mis-name">王胖子</span>购买了商品
										</div>
									</div>
									<div class="cell fixed">
										<span class="mission-time">1小时前</span>
									</div>
								</div>
								
								<div class="mission-details">
									<div class="details-list">
										<div class="details-list-left fl">配送商品：</div>
										<div class="details-list-right">可口可乐</div>
									</div>
									<div class="details-list">
										<div class="details-list-left fl">配送地址：</div>
										<div class="details-list-right">庐阳区临泉路387号102</div>
									</div>
									<div class="details-list">
										<div class="details-list-left fl">商品价格：</div>
										<div class="details-list-right">￥3.00</div>
									</div>
								</div>
								
								<a class="details-list mui-text-right bor-b-ed">
									<div class="details-list-left view-mission">查看订单</div>
									<span class="mui-icon mui-icon-arrowright" style="color: #777;"></span>
								</a>
							</li>
							
							<li class="mission-item">
								<div class="mui-flex mission-title">
									<div class="cell fixed">
										<img src="images/default-avatar.png" class="is-avatar" />
									</div>
									<div class="cell">
										<div class="mission-content a-line">
											用户<span class="mis-name">王胖子</span>购买了商品
										</div>
									</div>
									<div class="cell fixed">
										<span class="mission-time">1小时前</span>
									</div>
								</div>
								
								<div class="mission-details">
									<div class="details-list">
										<div class="details-list-left fl">配送商品：</div>
										<div class="details-list-right">可口可乐</div>
									</div>
									<div class="details-list">
										<div class="details-list-left fl">配送地址：</div>
										<div class="details-list-right">庐阳区临泉路387号102</div>
									</div>
									<div class="details-list">
										<div class="details-list-left fl">商品价格：</div>
										<div class="details-list-right">￥3.00</div>
									</div>
								</div>
								
								<a class="details-list mui-text-right bor-b-ed">
									<div class="details-list-left view-mission">查看订单</div>
									<span class="mui-icon mui-icon-arrowright" style="color: #777;"></span>
								</a>
							</li>
					    </ul>
					</div>
				</div>
			</div>
			
			<!--<p class="read-more">没有更多了！</p>-->
		</div>
		
		<div class="nav-clear"></div>
	    <nav class="mui-bar mui-bar-tab nav-box" id="nav">
	        <a class="nav-list" id="mission_hall" data-id="1">
	            <span class="nav-icon nav-icon1"></span>
	            <span class="nav-tab-label">任务大厅</span>
	        </a>
	        <a class="nav-list" id="personal" data-id="2">
	            <span class="nav-icon nav-icon2"></span>
	            <span class="nav-tab-label">我的</span>
	        </a>
	    </nav>
	    
	    
		<script type="text/javascript">
			$(function() {
				mui.init({
					pullRefresh : {
					    container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
					    down : {
					      style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
					      color:'#ff850b', //可选，默认“#2BD009” 下拉刷新控件颜色
					      height:'50px',//可选,默认50px.下拉刷新控件的高度,
					      range:'100px', //可选 默认100px,控件可下拉拖拽的范围
					      offset:'74px', //可选 默认0px,下拉刷新控件的起始位置
					      auto: true,//可选,默认false.首次加载自动上拉刷新一次
					      callback: ()=>{
					      	setTimeout(()=> {
					      		mui('#refreshContainer').pullRefresh().endPulldown();
					      	}, 1000)
					      } 
					    },
					    up : {
					      height:50,//可选.默认50.触发上拉加载拖动距离
					      auto:false,//可选,默认false.自动上拉加载一次
					      contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
					      contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
					      callback : ()=> {
					      	setTimeout(()=> {
					      		mui('#refreshContainer').pullRefresh().endPullup(false);
					        }, 1000)
					      }
					    }
				    },
				});
				
				mui.plusReady(function(){
					heightLight('1');
			    	mui('#nav').on('tap', '#mission_hall', ()=> {
			    		plus.webview.getWebviewById('mission_hall').show();
			    	});
			    	
			    	mui('#nav').on('tap', '#personal', ()=> {
				    	plus.webview.getWebviewById("personal").show();
			    	});
			    	
			    	mui('header').on('tap', '#my_order', ()=> {
			    		mui.openWindow({
							url: 'my-order.html',
							id: 'my-order.html'
						});
			    	})
			    	
			    	mui('header').on('tap', '#my_message', ()=> {
			    		mui.openWindow({
							url: 'my-message.html',
							id: 'my-message.html'
						});
			    	})
			    	
			    	mui('.mission-item').on('tap', '.details-list', ()=> {
			    		mui.openWindow({
							url: 'mission-details.html',
							id: 'mission-details.html'
						});
			    	})
			    })
			})
		</script>
	</body>
</html>
